<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px'
      }"
    >
      <h3 v-if="level1.length == 0">找不到相关文档</h3>
      <a-row>
        <a-col :span="6">
          <a-tree
            v-if="level1.length > 0"
            :tree-data="level1"
            @select="onSelect"
            :replaceFields="{ title: 'name', key: 'id', value: 'id' }"
            :defaultExpandAll="true"
            :defaultSelectedKeys="defaultSelectedKeys"
          ></a-tree>
        </a-col>
        <a-col :span="18">
          <div class="wangEdit" :innerHTML="html"></div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { docAll, idByContent } from "@/api";
import { Tool } from "@/util/tool";
import { useRoute } from "vue-router";

export default defineComponent({
  setup: function() {
    const route = useRoute();
    const docs = ref();
    const level1 = ref();
    const html = ref();
    const defaultSelectedKeys = ref();
    defaultSelectedKeys.value = [];
    level1.value = [];
    onMounted(() => {
      hander();
    });

    const hander = async () => {
      let res = await docAll(route.query.ebookId);
      let ret = res.data;
      if (ret.success) {
        docs.value = ret.content;
        level1.value = [];
        level1.value = Tool.array2Tree(docs.value, 0);
        console.log(level1);
        if (Tool.isNotEmpty(level1.value.length)) {
          defaultSelectedKeys.value = [level1.value[0].id];

          getContent(level1.value[0].id);
        }
      } else {
        console.log("失败了");
      }
    };
    const getContent = async (id: number) => {
      let res = await idByContent(id);
      if (res.data.success) {
        html.value = res.data.content;
        // editor.txt.html(res.data.content);
      } else {
        // editor.txt.html("");
      }
    };

    const onSelect = (selectedKeys: any, info: any) => {
      if (Tool.isNotEmpty(selectedKeys)) {
        getContent(selectedKeys[0]);
      }
    };

    return {
      level1,
      onSelect,
      html,
      defaultSelectedKeys
    };
  },
  components: {}
});
</script>
<style scoped>
/* table 样式 */
.wangEdit table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.wangEdit table td,
.wangEdit table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.wangEdit table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.wangEdit blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.wangEdit code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.wangEdit pre code {
  display: block;
}

/* ul ol 样式 */
.wangEdit ul,
ol {
  margin: 10px 0 10px 20px;
}
</style>
